<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定作业</title>
		<style type="text/css">
			#div{
				width: 300px;
				height: 300px;
				background-color: green;
			}
		</style>
	</head>
	<body>
        <div id="div" onclick="" onmouseenter="a()" onmouseleave="b()" onmousemove="c()"></div>
        <button type="button" onclick="i()">添加监听器</button>
        <button type="button" onclick="j()">清除监听器</button>
        <form action="" method="POST">
            用户名: <input type="text" id="username" onfocus="d()" onblur="e()">
            <br>
            密码: <input type="password" id="pwd" onfocus="f()" onblur="g()">
            <br>
            <button type="button" id="btn">提交</button>
        </form>
    </body>
    <script type="text/javascript">
        function a(){
            console.log('进入div事件');
        }
        function b(){
            console.log('离开div事件');
        }
        function c(){
            console.log('别移动过来');
        }
        function d(){
            console.log('开始输入用户名');
        }
        function e(){
            console.log('完成用户名的输入');
            var username=document.getElementById('username');
            if(username.value==''){
                alert('没有输入用户名');
                return;
            }
        }
        function f(){
            console.log('开始输入密码');
        }
        function g(){
            console.log('完成密码的输入');
            var pwd=document.getElementById('pwd');
            if(pwd.value==''){
                 alert('没有输入密码')
            }
        }
        document.getElementById('btn').onclick = function(){
		var name=document.getElementById('username');
		var pwd=document.getElementById('pwd');
		if(name.value == '' && pwd.value == ''){
			alert('用户名和密码为空')
			return
		    }
		if(name.value == ''){
			alert('用户名为空')
			return
		    }
		if(pwd.value == ''){
			alert('密码为空')
			return
		    }
        }
        function h(){
			console.log('鼠标正在移动')
		}
		function i(){
			document.getElementById('div').addEventListener('mousemove',h)
			alert('监听器添加成功')
		}
		function j(){
			document.getElementById('div').removeEventListener('mousemove',h)
			alert('监听器移除成功')
		}
    </script>
</html>